<template>
	<view class="mainCon">
		<view class="orderList">
			<view class="orderItem" v-for="(item,index) in orderList">
				<view class="orderHead">
					<view class="headcell">
						<view class="leftCon">
							<view class="labelTag">
								提单号：
							</view>
							{{item.BILL_NO}}
						</view>
						<view class="status1">
							<template v-if="item.WORK_WAY=='FOEI'">
								返空
							</template>
							<!-- <template v-if="item.WORK_WAY=='EOFI'">
								返重
							</template>
							<template v-if="item.WORK_WAY=='FINO'">
								返重
							</template>
							<template v-if="item.WORK_WAY=='EINO'">
								返空
							</template> -->
						</view>
					</view>
					<view class="headcell">
						<view class="dateLabel">
							有效期 : {{$u.timeFormat(item.DEADLINE, 'yyyy-mm-dd hh:MM:ss')}}
						</view>
						<view class="status2">
							<template v-if="current==0">
								待验残
							</template>
						</view>
					</view>
				</view>
				<view class="orderInfo">
					<view class="infoCell">
						<view class="labelTag">
							箱型尺寸：
						</view>
						<view style="display: flex;align-items: center;">
							<view class="infoCon">
								{{item.XC}}
							</view>
						
							<view class="infoCon" style="margin: 0 20rpx;">
								{{item.XX}}
							</view>
						
							<view class="infoCon">
								{{item.XH}}
							</view>
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							车牌号
						</view>
						<view class="infoCon">
							{{item.CARCODE}}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							船名/航次
						</view>
						<view class="infoCon">
							{{item.SHIPNAME}}  /  {{item.I_VOYAGE}}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							业务属性
						</view>
						<view class="infoCon">
							{{item.TRADE_ID=='1'?'外贸':'内贸'}}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							箱主
						</view>
						<view class="infoCon">
							{{item.XGS}}
						</view>
					</view> 
				</view>
				<view class="bottomActions">
					<view class="confirm" @click="tapyanCan(item)">
						验残
					</view>
				</view>
			</view>
		</view>

		<view style="margin-top: 100rpx;" v-if="orderList.length==0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [],
				tel: "",
				flag: false
			}
		},
		onLoad() {
			this.tel = uni.getStorageSync("userInfo").mobile
			this.getData()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/ftt5VsMudaesjfc',
					method: "get",
					success: (res) => {
						uni.hideLoading()
						this.orderList = res.data.rows
					}
				})
			},
			tapyanCan(item){
				uni.navigateTo({
					url:'./yanqianSubmit?id='+item.ID
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F2F1F9;
	}
	
</style>

<style lang="scss" scoped>
	
	.mainCon {
		.tabHead {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #FFFFFF;

			.tabItem {
				width: 160rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				text-align: center;
				border: 1rpx solid #1A75FF;
				color: #868887;
				font-size: 26rpx;
			}

			.active {
				background-color: #1A75FF;
				color: #FFFFFF;
			}
		}

		.orderList {
			width: 700rpx;
			margin: 20rpx auto;

			.orderItem {
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.orderHead {
					.headcell {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.leftCon {
							display: flex;
							align-items: center;

							.labelTag {
								background-color: #E0EDFB;
								color: #4C86E7;
								width: 150rpx;
								line-height: 50rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								text-align: center;
								margin-right: 15rpx;
							}
						}

						.status1 {
							color: #4C86E7;
							font-size: 26rpx;
						}

						.dateLabel {
							color: #858585;
						}

						.status2 {
							color: #E94340;
							font-size: 30rpx;
						}
					}
				}

				.orderInfo {
					margin-top: 20rpx;
					border-top: 1rpx dashed #C1C3C2;
					padding-top: 20rpx;

					.infoCell {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 150rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}

						.labelName {
							color: #C1C3C2;
							font-size: 28rpx;
							margin-right: 15rpx;
							width: 150rpx;
						}

						.infoCon {
							color: #87888A;
						}
					}
				}

				.bottomActions {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.delete {
						width: 250rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #D4D4D4;
						color: #D4D4D4;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}

					.confirm {
						width: 250rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>
